<template>
    <div class="animateCircle">
        <div class="p3d ui_base">
            <div class="base u_p3d" :style="`transform:rotateX(85deg) rotateY(0deg) rotateZ(${deg}deg)`">
                <div class="ball_base u_p3d" :style="animateIndex(CircleDatas.length, index)"
                    v-for="(item, index) in CircleDatas" :key="index">
                    <div class="ball" :style="computedItemStyle(index)" @mouseover="stop()" @mouseleave="runAnimate">
                        <img class="img" :src="item.url" />
                        <!-- {{deg  / CircleDatas.length * (index + 1) / 360}} -->
                        <!-- {{ (deg % (index + 1)).toFixed(2) }} -->
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>
<script setup lang='ts'>
import { onMounted } from 'vue';
import { ref } from 'vue';
import { CircleDatas } from '../constants/center/circle.ts'
const deg = ref(0)
let animation: any
const stop = () => {
    cancelAnimationFrame(animation)
}
const animateIndex = (total, index) => {
    let zIndex = 9
    let scale = 1
    const color = '#FFF'
    const deg = (360 / total) * index
    if (deg >= 0 && deg <= 180) {
        zIndex = 3
        scale = 0.5

    }
    return `transform: rotateX(-90deg) rotateY(${deg}deg) translate(-50%,-50%);
      color:${color};z-index:${zIndex}`
}
const runAnimate = () => {
    deg.value += 0.2
    animation = requestAnimationFrame(runAnimate)
}
const computedItemStyle = (index) => {
    const ratio = (deg.value - (360 / CircleDatas.length) * index)
    // const scale = ratio  360
    return `transform: rotateY(${ratio}deg) `
}
onMounted(() => {
    runAnimate()
})
</script>
<style lang='scss' scoped>
.animateCircle {
    padding-bottom: 50px;
    position: absolute;
    left: 5%;
    top: -120%;
    width: 90%;
    margin: 0px auto 0;
    height: 280px;
    z-index: 100;

}


.u_p3d {
    -webkit-transform-style: preserve-3d !important;
    transform-style: preserve-3d !important;
}

.ui_base {
    position: absolute;
    top: 50%;
    width: 100%;
    left: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
}

.base {

    -webkit-transform: rotateX(80deg) rotateY(0deg);
    transform: rotateX(80deg) rotateY(0deg);
    position: relative;
    width: 100%;
    height: 380.64px;
    transform-origin: 50% 50%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: all 0.1s linear;
}

.ball_base {
    transform-origin: 00% 00%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 250.6px;
    cursor: pointer;
    color: #fff;
    font-size: 12px;

    .img {
        width: 150px;
        object-fit: cover;

    }

    .ball {
        -webkit-transform-origin: 50% 50%;
        transform-origin: 50% 50%;
        position: absolute;
        width: auto;
        text-align: center;
        left: 0px;
        top: 0px;
    }

    .ball-title {
        color: #0068B7;
        text-align: center;
        font-size: 24px;
        margin-bottom: 8px;
        text-shadow: 2px 4px 4px rgba(0, 0, 0, 0.3);
    }

}
</style>